<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:500" rel="stylesheet">

<!-- Banner -->
<div *ngIf="hasFeature('header') && bannerContent" class="header">
    <div class="banner">
        <span class="bannerContent" role="alert" [innerHTML]="bannerContent"></span>
        <div [style.margin-bottom]="hasFeature('tabs') ? '0px' : '15px'" class="bannerLinks">
            <div>
                <a href="http://attack.mitre.org">MITRE ATT&CK&reg; Navigator</a>
            </div>
            <div *ngIf="hasFeature('tabs')" class="helpIcon" matTooltip="help" (click)="openHelpDialog()">
                <svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px" fill="#FFFFFF"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/></svg>
            </div>
        </div>
    </div>
</div>

<!-- Header/Help -->
<div *ngIf="hasFeature('header') && !bannerContent" [style.margin-bottom]="hasFeature('tabs') ? '0px' : '15px'" class="header" >
    <div class="logo">
        <a href="http://attack.mitre.org">MITRE ATT&CK&reg; Navigator</a>
    </div>
    <div *ngIf="hasFeature('tabs')" class="helpButton" matTooltip="help" (click)="openHelpDialog()">
        ?
    </div>
</div>

<!-- Tabs display -->
<div [style.margin-top]="hasFeature('header') ? '0px' : '15px'" *ngIf="layerTabs.length > 0 && hasFeature('tabs')">
    <ul class="tabs">
        <!-- dynamic tabs (can be opened and closed) -->
        <li *ngFor="let tab of layerTabs; let $i = index" (click)="selectTab(tab)" [class.active]="tab == activeTab">
            <span *ngIf="!tab == activeTab || !tab.isDataTable" class="tab-title" [style.cursor]="tab == activeTab ? 'default' : 'pointer'">{{tab.isDataTable ? tab.dataContext.name : tab.title}}</span>
            <input *ngIf="!(!tab == activeTab || !tab.isDataTable)" [style.cursor]="tab == activeTab ? tab.isDataTable ? 'text' : 'default' : 'pointer'" type="text" [(ngModel)]="tab.dataContext.name" [style.width]="tab.isDataTable ? ((tab.dataContext.name.length) * 8.4) + 'px' : (tab.title.length * 8.4) + 'px' ">
            <span class="tab-close" *ngIf="tab.isCloseable" (click)="closeTab(tab)">x</span>

            <!-- tab enumerator (for layer operations) -->
            <span class="tabEnumerator" *ngIf="getActiveTab().showScoreVariables && tab.isDataTable && (!domain || tab.domain === domain) && alphabetical(indexToChar($i))">{{indexToChar($i)}}</span>
        </li>

        <!-- open new tab button -->
        <li *ngIf="layerTabs.length < 10" class="addTab" (click)="newBlankTab()">+</li>
    </ul>
</div>
<div *ngIf="layerTabs.length == 0" class="newTab">
    <!-- you shouldn't ever see this, but just in case -->
    <button (click)="newBlankTab()">Start</button>
</div>

<ng-template #safariWarning>
    <div class="safari-warning">
        <h3>WARNING</h3>
        <p>
            We’ve detected that you are using the Safari browser. As of Navigator version <b>4.2</b>, Safari is no longer supported due to an unfixable freeze that can occur when selecting a layer tab.
        </p>
        <p>
            We recommend you use Chrome or Firefox instead. You can continue to use the Navigator in Safari, but you may lose work if the application freezes.
        </p>
        <button mat-button (click)="safariDialogRef.close()">Dismiss</button>
    </div>
</ng-template>

<!-- New tab template -->
<ng-template [ngIf]="activeTab && !activeTab.isDataTable">
    <div class="newTab border">
        <mat-accordion class="headers-align">

            <!-- Create new layer interface -->
            <mat-expansion-panel #newlayer>
                <mat-expansion-panel-header>
                    <mat-panel-title>
                        Create New Layer
                    </mat-panel-title>
                    <mat-panel-description>
                        Create a new empty layer
                    </mat-panel-description>
                </mat-expansion-panel-header>

                <!-- Domain buttons for latest version -->
                <table class="btn-group" role="group">                        
                    <ng-template ngFor let-domain [ngForOf]="filterDomains(ds.versions[0])" let-domainIndex="index">
                        <td><button mat-raised-button (click)="newLayer(domain.id)">{{domain.name}}</button></td>
                    </ng-template>
                </table>

                <!-- More domain/version options -->
                <mat-expansion-panel>
                        <mat-expansion-panel-header>
                            <mat-panel-title>
                                More Options
                            </mat-panel-title>
                        </mat-expansion-panel-header>

                    <table class="layerOpTable">
                        <!-- Choose version -->
                        <tr>
                            <td>
                                <mat-form-field>
                                    <mat-select placeholder="version" [(ngModel)]="nVersion" required>
                                        <mat-option [value]="null">none</mat-option>
                                        <mat-option *ngFor="let nVersion of this.dataService.versions" [value]="nVersion">{{nVersion}}</mat-option>
                                    </mat-select>
                                </mat-form-field>
                            </td>
                            <td>
                                Choose the version for the new layer. <em>*Versions prior to {{ds.versions[ds.versions.length-1]}} are not supported by Navigator v{{nav_version}}.</em>
                            </td>
                        </tr>
                        <!-- Choose domain -->
                        <tr>
                            <td>
                                <mat-form-field>
                                    <mat-select placeholder="domain" [(ngModel)]="nDomain" [disabled]="!nVersion" required>
                                        <mat-option [value]="null">none</mat-option>
                                        <mat-option *ngFor="let nDomain of filterDomains(nVersion)" [value]=nDomain>{{nDomain.name}}</mat-option>
                                    </mat-select>
                                </mat-form-field>
                            </td>
                            <td [ngClass]="{disabled: !nVersion}">
                                Choose a domain for the new layer.
                            </td>
                        </tr>
                    </table>

                    <!-- Create new layer with chosen version & domain -->
                    <button mat-button [disabled]="!nVersion || !nDomain" (click)="newLayer(nDomain.id)">Create</button>
                </mat-expansion-panel>
            </mat-expansion-panel>

            <!-- Open existing layer interface -->
            <mat-expansion-panel>
                <mat-expansion-panel-header>
                    <mat-panel-title>
                    Open Existing Layer
                    </mat-panel-title>
                    <mat-panel-description>
                        Load a layer from your computer or a URL
                    </mat-panel-description>
                </mat-expansion-panel-header>
                <table class="inputTable">
                    <tr>
                        <!-- Upload file from local -->
                        <td><button mat-button (click)="openUploadPrompt()">Upload from local</button>
                        <input id="uploader" type="file" style="display: none" (change)="loadLayerFromFile()"/></td>

                        <td><b style="font-size: 8pt">OR</b></td>

                        <!-- Upload layer via URL -->
                        <td><mat-form-field>
                            <input type="text"
                                   matInput
                                   placeholder="Load from URL"
                                   [(ngModel)]="loadURL"/>
                            <button mat-button matSuffix mat-icon-button aria-label="go" *ngIf="loadURL" (click)="loadLayerFromURL(loadURL, true)">></button>
                        </mat-form-field></td>
                    </tr>
                </table>
            </mat-expansion-panel>

            <!-- Create layer from other layers -->
            <mat-expansion-panel (opened)="activeTab.showScoreVariables = true" (closed)="activeTab.showScoreVariables = false">
                <mat-expansion-panel-header>
                    <mat-panel-title>
                        Create Layer from other layers
                    </mat-panel-title>
                    <mat-panel-description>
                        Choose layers to inherit properties from
                    </mat-panel-description>
                </mat-expansion-panel-header>

                <table class="layerOpTable">
                    <!-- Domain -->
                    <tr>
                        <td>
                            <mat-form-field>
                                <mat-select placeholder="domain" [(ngModel)]="domain" required>
                                    <mat-option [value]="null">none</mat-option>
                                    <mat-option *ngFor="let domain of this.dataService.domains" [value]=domain.id>{{domain.name}} {{domain.version}}</mat-option>
                                </mat-select>
                            </mat-form-field>
                        </td>
                        <td>
                            Choose the domain and version for the new layer. Only layers of the same domain and version can be merged.
                        </td>
                    </tr>

                    <!-- Score expression -->
                    <tr>
                        <td>
                            <mat-form-field>
                                <input type="text"
                                       matInput
                                       placeholder="score expression"
                                       [disabled]="!domain"
                                       [(ngModel)]="scoreExpression"
                                       (keyup)="scoreExpression = scoreExpression.toLowerCase()"
                                       style="letter-spacing: 2px" />
                                <mat-hint style="color: red" align="start">{{getScoreExpressionError()}}</mat-hint>
                            </mat-form-field>
                        </td>
                        <td [ngClass]="{disabled: !domain}">
                            Use constants (numbers) and layer variables (yellow, above) to write an expression for the initial value of scores in the new layer. A full list of supported operations can be found <a href="http://mathjs.org/docs/expressions/syntax.html#operators">here</a>. Leave blank to initialize scores to 0.
                        </td>
                    </tr>

                    <!-- Gradient -->
                    <tr>
                        <td>
                            <mat-form-field>
                                <mat-select placeholder="gradient" [(ngModel)]="gradient" [disabled]="!domain">
                                    <mat-option [value]="null">none</mat-option>
                                    <mat-option *ngFor="let vm of getLayers()" [value]=vm>{{vm.name}}</mat-option>
                                </mat-select>
                            </mat-form-field>
                        </td>
                        <td [ngClass]="{disabled: !domain}">
                            Choose which layer to import the scoring gradient from. Leave blank to initialize with the default scoring gradient.
                        </td>
                    </tr>

                    <!-- Coloring -->
                    <tr>
                        <td>
                            <mat-form-field>
                                <mat-select placeholder="coloring" [(ngModel)]="coloring" [disabled]="!domain">
                                    <mat-option [value]="null">none</mat-option>
                                    <mat-option *ngFor="let vm of getLayers()" [value]=vm>{{vm.name}}</mat-option>
                                </mat-select>
                            </mat-form-field>
                        </td>
                        <td [ngClass]="{disabled: !domain}">
                            Choose which layer to import manually assigned colors from. Leave blank to initialize with no colors.
                        </td>
                    </tr>

                    <!-- Comments -->
                    <tr>
                        <td>
                            <mat-form-field>
                                <mat-select placeholder="comments" [(ngModel)]="comments" [disabled]="!domain">
                                    <mat-option [value]="null">none</mat-option>
                                    <mat-option *ngFor="let vm of getLayers()" [value]=vm>{{vm.name}}</mat-option>
                                </mat-select>
                            </mat-form-field>
                        </td>
                        <td [ngClass]="{disabled: !domain}">
                            Choose which layer to import comments from. Leave blank to initialize with no comments.
                        </td>
                    </tr>

                    <!-- States -->
                    <tr>
                        <td>
                            <mat-form-field>
                                <mat-select placeholder="states" [(ngModel)]="enabledness" [disabled]="!domain">
                                    <mat-option [value]="null">none</mat-option>
                                    <mat-option *ngFor="let vm of getLayers()" [value]=vm>{{vm.name}}</mat-option>
                                </mat-select>
                            </mat-form-field>
                        </td>
                        <td [ngClass]="{disabled: !domain}">
                            Choose which layer to import enabled/disabled states from. Leave blank to initialize all to enabled.
                        </td>
                    </tr>

                    <!-- Filters -->
                    <tr>
                        <td>
                            <mat-form-field>
                                <mat-select placeholder="filters" [(ngModel)]="filters" [disabled]="!domain">
                                    <mat-option [value]="null">none</mat-option>
                                    <mat-option *ngFor="let vm of getLayers()" [value]=vm>{{vm.name}}</mat-option>
                                </mat-select>
                            </mat-form-field>
                        </td>
                        <td [ngClass]="{disabled: !domain}">
                            Choose which layer to import filters from. Leave blank to initialize with no filters.
                        </td>
                    </tr>

                    <!-- Legend -->
                    <tr>
                        <td>
                            <mat-form-field>
                                <mat-select placeholder="legend" [(ngModel)]="legendItems" [disabled]="!domain">
                                    <mat-option [value]="null">none</mat-option>
                                    <mat-option *ngFor="let vm of getLayers()" [value]=vm>{{vm.name}}</mat-option>
                                </mat-select>
                            </mat-form-field>
                        </td>
                        <td [ngClass]="{disabled: !domain}">
                            Choose which layer to import the legend from. Leave blank to initialize with an empty legend.
                        </td>
                    </tr>
                </table>

                <!-- Create -->
                <button mat-button [disabled]="getScoreExpressionError() || !domain" (click)="layerByOperation(); showScoreVariables = false">Create</button>
            </mat-expansion-panel>

            <!-- Customized Navigator-->
            <mat-expansion-panel>
                <mat-expansion-panel-header>
                    <mat-panel-title>
                        Create Customized Navigator
                    </mat-panel-title>
                    <mat-panel-description>
                        Create a hyperlink to a customized ATT&CK Navigator
                    </mat-panel-description>
                </mat-expansion-panel-header>

                <table class="inputTable">
                    <!-- Default layers -->
                    <tr>
                        <td><h1>Default Layers</h1></td>
                        <td></td>
                    </tr>
                    <tr class="custom_nav_inputsection">
                        <td>
                            <ul class="layerLinks">
                                <li *ngFor="let layerLinkURL of layerLinkURLs; let i = index trackBy:trackByFunction">
                                    <mat-form-field>
                                        <input type="text" matInput
                                            [placeholder]="'default layer URL ' + (i + 1)" [(ngModel)]="layerLinkURLs[i]"/>
                                        <button mat-button matSuffix mat-icon-button aria-label="remove" (click)="removeLayerLink(i)">
                                            x
                                        </button>
                                    </mat-form-field>
                                </li>
                                <li>
                                    <button mat-button (click)="addLayerLink()">
                                        add {{layerLinkURLs.length > 0? "another" : "a"}} layer link
                                    </button>
                                </li>
                            </ul>
                        </td>
                        <td>Enter the URLs of layers hosted on the web. The custom navigator will open these layers by default.</td>
                    </tr>

                    <!-- Navigator Features -->
                    <tr>
                        <td><h1>Navigator Features</h1></td>
                        <td></td>
                    </tr>
                    <ng-template ngFor let-featureItem [ngForOf]="customizedConfig" let-featureItemIndex="index">
                        <!-- features -->
                        <tr class="featureRow noselect" *ngIf="!featureItem.subfeatures"  (click)="featureItem.enabled = !featureItem.enabled">
                            <td class="featureRow-button">
                                <img height="16px" [src]="featureItem.enabled ? 'assets/icons/ic_check_box_black_24px.svg' : 'assets/icons/ic_check_box_outline_blank_black_24px.svg'"/> {{featureItem.name.split("_").join(" ")}}
                            </td>
                            <td>{{featureItem.description}}</td>
                        </tr>
                        <!-- sub-featuers -->
                        <tr *ngIf="featureItem.subfeatures">
                            <td>
                                <h2>{{featureItem.name.split("_").join(" ")}}</h2>
                            </td>
                            <td></td>
                        </tr>
                        <ng-template ngFor let-subfeature [ngForOf]="featureItem.subfeatures" let-subfeatureIndex="index" let-last="last">
                            <tr class="featureRow noselect" (click)="subfeature.enabled = !subfeature.enabled">
                                <td class="featureRow-button subfeature" [class.last]="last" style="padding-left: 20px" >
                                    <img height="16px" [src]="subfeature.enabled ? 'assets/icons/ic_check_box_black_24px.svg' : 'assets/icons/ic_check_box_outline_blank_black_24px.svg'"/> {{subfeature.name.split("_").join(" ")}}
                                </td>
                                <td class="subfeature" [class.last]="last">{{subfeature.description}}</td>
                            </tr>
                        </ng-template>
                    </ng-template>
                </table>

                <!-- Custom Navigator URL -->
                <div style="text-align: center; margin-top: 20px">
                    <mat-form-field id="layerlinkfield">
                        <input id="layerLink" type="text"
                        matInput
                        readonly="readonly"
                        (click)="selectLayerLink()"
                        [value]="getLayerLink()"
                        placeholder="custom navigator URL"/>
                        <button (click)="copyLayerLink()" mat-button matSuffix mat-icon-button aria-label="copy"><img src="assets/icons/ic_content_copy_black_24px.svg" width="14px" alt="copy" matTooltip="copy" matTooltipPosition="right"></button>
                        <mat-hint *ngIf="copiedRecently">copied</mat-hint>
                    </mat-form-field>
                </div>
            </mat-expansion-panel>
        </mat-accordion>

        <!-- Help dialog -->
        <div class="helpButtonContainer">
            <button mat-button (click)="openHelpDialog()">help</button>
        </div>

    </div>
</ng-template>

<ng-template [ngIf]="activeTab && activeTab.isDataTable">
    <DataTable [viewModel]="activeTab.dataContext"></DataTable>
</ng-template>
